<template>
  <view class="container">
    <!-- 头部背景图 -->
    <image src="/sub_shop/static/images/swiperbgc.png" mode="" class="swiperbgc"></image>
    <!-- 头部搜索组件 -->
    <headerCom style="position: absolute; top: 50rpx" ref="headerRef">
      <template #sort>
        <image src="/sub_shop/static/images/sort.png" mode="" style="width: 38rpx; height: 38rpx; margin-left: 100rpx"></image>
      </template>
    </headerCom>
    <!-- 内容区域 -->
    <!-- 轮播图 -->
    <swiper :autoplay="true" :interval="3000" :duration="1000" class="swiperbox">
      <swiper-item>
        <image src="../static/goodsimg.png" mode="aspectFill" class="swiperitemimg"></image>
      </swiper-item>
    </swiper>
    <!-- 商品标题 -->
    <view class="goodtitle">
      <view class="goodsplace">莫斯科</view>
      商品名称影像旗舰新款智能手机华为手机
    </view>
    <!-- 富文本 -->
    <rich-text :nodes="richtext"></rich-text>
    <!-- 商铺选择-->
    <view class="shopfeature">
      <view class="shopfeatureitem">
        <image src="../static/shophome.png" mode=""></image>
        <view>店铺主页</view>
      </view>
      <view class="shopfeatureitem" @click="fncollectshop">
        <!-- 看是否收藏店铺 -->
        <image v-if="collectshop" src="/sub_shop/static/images/clollected.png"></image>
        <image v-else src="../static/goodscollect.png" mode=""></image>
        <view>收藏商品</view>
      </view>
      <view class="shopfeatureitem">
        <image src="../static/tousugoods.png" mode=""></image>
        <view>投诉商品</view>
      </view>
      <view class="shopfeatureitem">
        <image src="../static/copylink.png" mode=""></image>
        <view>复制链接</view>
      </view>
    </view>
    <!-- 联系客服和价格 -->
    <view class="kefu">
      <!-- 拼团模式下显示 -->
      <view v-if="groupbuy">
        <!-- 倒计时 -->
        <view style="display: flex; justify-content: center; font-size: 30rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222">
          倒计时：
          <uni-countdown :minute="30" :show-colon="false" />
        </view>
        <!-- 拼团人数 -->
        <view style="text-align: center; margin-top: 20rpx">
          3人团
          <image src="/sub_goodstype/static/requestion.png" style="width: 30rpx; height: 30rpx; vertical-align: middle"></image>
        </view>
        <!-- 拼团中 -->
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #f02525; text-align: center">拼团中0/3</view>
      </view>
      <view class="callkefu">联系客服</view>
      <!-- 物品团购买 -->
      <view class="price" v-if="!groupbuy">
        <view class="retail" @click="$refs.retailRef.open()">
          <view style="font-size: 32rpx">￥128.90</view>
          <view style="font-size: 24rpx">零售价</view>
        </view>
        <view class="wholesale" @click="$refs.wholesaleRef.open()">
          <view style="font-size: 32rpx">￥128.90</view>
          <view style="font-size: 24rpx">批发价</view>
        </view>
      </view>
      <!-- 拼团购买 -->
      <view class="bygroup" v-else>
        <view class="bygroupitem" @click="$refs.retailRef.open()">
          <view>￥128.90</view>
          <view style="font-size: 24rpx">零售价</view>
        </view>
        <view class="bygroupitem" @click="$refs.wholesaleRef.open()">
          <view>￥128.90</view>
          <view style="font-size: 24rpx">批发价</view>
        </view>
        <view class="bygroupitem" @click="$refs.groupbuyRef.open()">
          <view>￥128.90</view>
          <view style="font-size: 24rpx">拼团价</view>
        </view>
      </view>
    </view>
    <!-- 底部组件 -->
    <footerCom style="position: fixed; bottom: 0"></footerCom>
    <!-- 解决固定定位的覆盖问题 -->
    <view style="position: relative; bottom: 0; width: 750rpx; height: 98rpx"></view>

    <!-- 点击零售弹出弹框 -->
    <uni-popup ref="retailRef" type="bottom">
      <view class="retailcontain">
        <view class="header">
          <view style="margin-right: 240rpx">
            <image src="../static/goodsimg.png" mode="" style="width: 150rpx; height: 150rpx; vertical-align: middle; border-radius: 20rpx 20rpx 20rpx 20rpx"></image>
            <text style="font-size: 22rpx; color: red">￥</text>
            <text style="font-size: 40rpx; color: red">7688.00</text>
            <text style="font-size: 28rpx; color: red; padding-left: 18rpx">零售价</text>
          </view>
          <uni-icons type="closeempty" size="20" @click="$refs.retailRef.close()"></uni-icons>
        </view>
        <!-- 规格尺寸 -->
        <view style="margin: 40rpx 0 22rpx 0rpx">规格</view>
        <view class="itemstyle" :class="{ checked: checkstates == index }" v-for="(item, index) in guigeliost" :key="index" @click="checkstates = index">{{ item }}</view>

        <view class="size">尺寸</view>
        <view :class="{ itemsize: true, checked: sizechecked == index }" v-for="(item, index) in sizelist" :key="index" @click="sizechecked = index">{{ item }}</view>

        <view class="buynum">
          <view style="font-size: 30rpx; margin-right: 340rpx">购买数量</view>
          <view>
            <text class="btn" @click="decrease">-</text>
            <text class="count">{{ number }}</text>
            <text class="btn" @click="number++">+</text>
          </view>
        </view>
        <view class="gopay">去结算</view>
      </view>
    </uni-popup>
    <!-- 点击批发弹出弹框 -->
    <uni-popup ref="wholesaleRef" type="bottom">
      <view class="wholesalecontain">
        <!-- 头部图片 -->
        <view class="header">
          <view style="margin-right: 240rpx">
            <image src="../static/goodsimg.png" mode="" style="width: 150rpx; height: 150rpx; vertical-align: middle; border-radius: 20rpx 20rpx 20rpx 20rpx"></image>
            <text style="font-size: 22rpx; color: red">￥</text>
            <text style="font-size: 40rpx; color: red">7688.00</text>
            <text style="font-size: 28rpx; color: red; padding-left: 18rpx">批发价</text>
          </view>
          <uni-icons type="closeempty" size="20" @click="$refs.wholesaleRef.close()"></uni-icons>
        </view>
        <!-- 规格尺寸 -->
        <view style="margin: 40rpx 0 22rpx 0rpx">规格</view>
        <view class="itemstyle" :class="{ checked: checkstates == index }" v-for="(item, index) in guigeliost" :key="index" @click="checkstates = index">{{ item }}</view>
        <view class="size">尺寸</view>
        <view :class="{ itemsize: true, checked: sizechecked == index }" v-for="(item, index) in sizelist" :key="index" @click="sizechecked = index">{{ item }}</view>
        <!-- 购买数量 -->
        <view class="buynum">
          <view style="font-size: 30rpx; margin-right: 340rpx">购买数量</view>
          <view>
            <text class="btn" @click="decrease">-</text>
            <text class="count">{{ number }}</text>
            <text class="btn" @click="number++">+</text>
          </view>
        </view>
        <view class="gopay">去结算</view>
      </view>
    </uni-popup>
    <!-- 点击团购弹出弹框 -->
    <uni-popup ref="groupbuyRef" type="bottom">
      <view class="wholesalecontain">
        <!-- 头部图片 -->
        <view class="header">
          <view style="margin-right: 240rpx">
            <image src="../static/goodsimg.png" mode="" style="width: 150rpx; height: 150rpx; vertical-align: middle; border-radius: 20rpx 20rpx 20rpx 20rpx"></image>
            <text style="font-size: 22rpx; color: red">￥</text>
            <text style="font-size: 40rpx; color: red">7688.00</text>
            <text style="font-size: 28rpx; color: red; padding-left: 18rpx">团购价</text>
          </view>
          <uni-icons type="closeempty" size="20" @click="$refs.groupbuyRef.close()"></uni-icons>
        </view>
        <!-- 规格尺寸 -->
        <view style="margin: 40rpx 0 22rpx 0rpx">规格</view>
        <view class="itemstyle" :class="{ checked: checkstates == index }" v-for="(item, index) in guigeliost" :key="index" @click="checkstates = index">{{ item }}</view>
        <view class="size">尺寸</view>
        <view :class="{ itemsize: true, checked: sizechecked == index }" v-for="(item, index) in sizelist" :key="index" @click="sizechecked = index">{{ item }}</view>
        <!-- 购买数量 -->
        <view class="buynum">
          <view style="font-size: 30rpx; margin-right: 340rpx">购买数量</view>
          <view>
            <text class="btn" @click="decrease">-</text>
            <text class="count">{{ number }}</text>
            <text class="btn" @click="number++">+</text>
          </view>
        </view>
        <view class="gopay">去结算</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import headerCom from '@/components/headersearch/headersearch.vue';
import footerCom from '@/components/shopfooter/shopfooter.vue';
import { goodsdetail } from '@/services/goods.js';
export default {
  components: {
    headerCom,
    footerCom
  },
  onLoad(value) {
    // 获取商品详情
    this.getcategorydetail(value.categoryid);
  },
  data() {
    return {
      richtext: '',
      number: 3,
      guigeliost: ['米白色', '【新款女款】湖水蓝'],
      sizelist: ['X', 'L', 'XL'],
      checkstates: 0,
      sizechecked: 0,
      groupbuy: true,
      collectshop: false // 收藏店铺的状态
    };
  },
  methods: {
    // 获取商品详情
    async getcategorydetail(id) {
      const res = await goodsdetail(id);
      console.log('商品详情----', res);
    },
    // 减少商品数量
    decrease() {
      if (this.number <= 0) {
        return;
      }
      this.number--;
    },
    // 点击收藏店铺
    fncollectshop() {
      this.collectshop = !this.collectshop;
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  box-sizing: border-box;
  .swiperbgc {
    width: 750rpx;
    height: 176rpx;
    vertical-align: top;
  }
  .swiperbox {
    width: 750rpx;
    height: 750rpx;
    .swiperitemimg {
      display: block;
      width: 750rpx;
      height: 750rpx;
    }
  }
  .goodtitle {
    margin: 16rpx 28rpx;
    .goodsplace {
      display: inline-block;
      width: 112rpx;
      height: 46rpx;
      background: #eb5f3e;
      color: #fff;
      text-align: center;
      line-height: 46rpx;
      margin-right: 20rpx;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
    }
  }
  .shopfeature {
    display: flex;
    .shopfeatureitem {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 25%;
      image {
        width: 48rpx;
        height: 48rpx;
      }
    }
  }
  .kefu {
    margin-top: 50rpx;

    .callkefu {
      width: 240rpx;
      height: 72rpx;
      background: #61bdb2;
      color: #fff;
      text-align: center;
      line-height: 72rpx;
      border-radius: 36rpx 36rpx 36rpx 36rpx;
      margin: 20rpx 0 24rpx 248rpx;
    }
    .price {
      display: flex;
      .retail {
        width: 284rpx;
        height: 96rpx;
        text-align: center;
        padding-top: 8rpx;
        color: #fff;
        background: linear-gradient(133deg, #f11f1f 0%, #ee6d6d 100%);
        border-radius: 46rpx 46rpx 46rpx 46rpx;
        margin-left: 56rpx;
      }
      .wholesale {
        width: 284rpx;
        height: 92rpx;
        text-align: center;
        padding-top: 8rpx;
        color: #fff;
        background: linear-gradient(133deg, #f11f1f 0%, #ee6d6d 100%);
        border-radius: 46rpx 46rpx 46rpx 46rpx;
        margin-left: 56rpx;
      }
    }
    .bygroup {
      display: flex;
      justify-content: space-evenly;
      .bygroupitem {
        box-sizing: border-box;
        width: 216rpx;
        height: 96rpx;
        text-align: center;
        padding-top: 10rpx;
        color: #fff;
        background: linear-gradient(133deg, #f11f1f 0%, #ee6d6d 100%);
        border-radius: 46rpx 46rpx 46rpx 46rpx;
      }
    }
  }
  .retailcontain {
    width: 750rpx;
    height: 840rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    padding: 44rpx 28rpx;
    .header {
      display: flex;
    }
    .itemstyle {
      display: inline-block;
      height: 56rpx;
      line-height: 56rpx;
      background: #e9e9e9;
      padding: 16rpx;
      text-align: center;
      margin-right: 28rpx;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
    }
    .size {
      margin: 40rpx 0 22rpx 0rpx;
    }
    .itemsize {
      display: inline-block;
      width: 192rpx;
      height: 72rpx;
      text-align: center;
      line-height: 72rpx;
      background: #e9e9e9;
      margin-right: 28rpx;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
    }
    .buynum {
      display: flex;
      margin-top: 60rpx;
      .btn {
        display: inline-block;
        width: 62rpx;
        height: 52rpx;
        margin-right: 26rpx;
        text-align: center;
        line-height: 52rpx;
        border: 2rpx dotted #ccc;
      }
      .count {
        margin-right: 26rpx;
      }
    }
    .gopay {
      width: 640rpx;
      height: 100rpx;
      margin-top: 104rpx;
      margin-left: 26rpx;
      text-align: center;
      line-height: 100rpx;
      color: #fff;
      background: linear-gradient(133deg, #f11f1f 0%, #ee6d6d 100%);
      border-radius: 50rpx 50rpx 50rpx 50rpx;
    }
  }
  .wholesalecontain {
    width: 750rpx;
    height: 840rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    padding: 44rpx 28rpx;
    .header {
      display: flex;
    }
    .itemstyle {
      display: inline-block;
      height: 56rpx;
      line-height: 56rpx;
      background: #e9e9e9;
      padding: 16rpx;
      text-align: center;
      margin-right: 28rpx;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
    }
    .size {
      margin: 40rpx 0 22rpx 0rpx;
    }
    .itemsize {
      display: inline-block;
      width: 192rpx;
      height: 72rpx;
      text-align: center;
      line-height: 72rpx;
      background: #e9e9e9;
      margin-right: 28rpx;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
    }
    .buynum {
      display: flex;
      margin-top: 60rpx;
      .btn {
        display: inline-block;
        width: 62rpx;
        height: 52rpx;
        margin-right: 26rpx;
        text-align: center;
        line-height: 52rpx;
        border: 2rpx dotted #ccc;
      }
      .count {
        margin-right: 26rpx;
      }
    }
    .gopay {
      width: 640rpx;
      height: 100rpx;
      margin-top: 104rpx;
      margin-left: 26rpx;
      text-align: center;
      line-height: 100rpx;
      color: #fff;
      background: linear-gradient(133deg, #f11f1f 0%, #ee6d6d 100%);
      border-radius: 50rpx 50rpx 50rpx 50rpx;
    }
  }
  .checked {
    background-color: #f04949 !important;
    color: #fff !important;
  }
}
</style>
